import React, { Component } from 'react'
import "./Tab.css"

export default class Tab extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: "hello world",
            box: "box",
            obj: {
                background: "blue",
            },


        };
    }
    render() {
        return (
            <div>
                <h1 className={[this.state.box,"box1"].join(" ")}>
                    这是一个类组件
                    </h1>
                    {/* 多个类名时必须用join(" ") 合并类名 */}
                <h3 style={this.state.obj}>
                    {this.state.msg}
                </h3>
            </div>
        )
    }
}
//类组件 使用快捷 rcc生成
//在类组件中 render 函数 return 就相当于是 vue 中的template
//在类组件中有一个constructor 生成的快捷方式是rconst
//这个constructor中有一个this.state就相当于 vue 中的data,函数组件中没有 所以类组件用的比较多
// state中的数据使用的时候 需要this.state.xx

//2. jsx语法 可以理解为vue中的模板语法
//插值语句{}
// 类名 className{} 注意没有引号了
//只要碰到js语法 就加上{}